<template>
  <div class="box">
    <el-form v-loading="loading" ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item label="名称" prop="name">
        <el-input v-model="pram.name" maxlength="20" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="pram.type" >
          <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input  v-model="pram.mobile" maxlength="20" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="标记图片" prop="icon">
        <el-image
          v-if="pram.icon"
          style="width: 150px;height: 150px;margin-right: 10px;margin-bottom: 10px" fit="cover"
          :src="pram.icon"></el-image>
        <br v-if="pram.icon">
        <el-button size="mini" icon="el-icon-picture" type="primary" @click="showChooseImage=true">点击选择图片</el-button>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        {{pram.address}}
        <el-button size="mini" icon="el-icon-location" type="primary" @click="showChoosePosition=true">点击选择位置</el-button>
      </el-form-item>
      <el-form-item label="显示" prop="status">
        <el-switch :active-value="1" :inactive-value="0" v-model="pram.status"></el-switch>
      </el-form-item>
      <el-form-item label="关键词" prop="keywords">
        <el-input  v-model="pram.keywords" maxlength="20" placeholder="请输入关键词" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="选择位置" v-if="showChoosePosition" :visible.sync="showChoosePosition" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" top="5vh" append-to-body>
      <iframe v-if="showChoosePosition" id="choosePosition" style="width: 100%;height: 500px" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=RBSBZ-EUW6Q-KT453-4THI6-AE5GH-B2BQW&referer=肃州有礼">
      </iframe>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" class="primary"  @click="showChoosePosition = false">确 定</el-button>
          </span>
    </el-dialog>
    <el-dialog
      title="上传图片"
      :visible.sync="showChooseImage"
      width="896px"
      :before-close="handleClose1"
      :modal="false"
    >
      <upload-index v-if="showChooseImage" :checkedMore="[]" :isMore="'1'" @getImage="getImage($event,1)" />
    </el-dialog>
  </div>
</template>

<script>
import {
  save
} from '@/api/map'
import { Debounce } from '@/utils/validate'
import Tinymce from "@/components/Tinymce/index";
export default {
  name: "MapEdit",
  components:{Tinymce},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: null
    },
    type: {
      type: Array,
      default: ()=>[],
    },
  },
  data() {
    return {
      showChoosePosition:false,
      showChooseImage:false,
      loading:false,
      imageList:[],
      pram: {
        id: 0,
        name:'',
        icon:'',
        mobile:'',
        keywords:'',
        address:'',
        longitude:'',
        latitude:'',
        type:null,
        status:1,
      },
      rules: {
        name: { required: true, message: '请填写标题', trigger: ['blur'] },
        type: { required: true, message: '请选择类型', trigger: ['blur'] },
        icon: { required: true, message: '请上传标记图片', trigger: ['blur'] },
        address: { required: true, message: '请选择位置', trigger: ['blur'] },
        keywords: { required: true, message: '请填写关键词', trigger: ['blur'] },

      },
    }
  },
  mounted() {
    this.initEditData();
    window.addEventListener('message', (event) =>{
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      let loc = event.data;
      if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        this.pram.latitude=loc.latlng.lat;
        this.pram.longitude=loc.latlng.lng;
        this.pram.address=loc.poiaddress
      }
    }, false);
  },
  beforeDestroy() {
    window.removeEventListener('message',function (){

    })
  },
  methods: {
    handleClose1(){
      this.showChooseImage=false
    },
    getImage(img,type) {
      this.pram.icon=img[0].attDir;
      this.showChooseImage=false;
    },
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //不是编辑页，即新增页则直接返回
      const {  id,name,icon,address,keywords,mobile,longitude,latitude,type,status} = this.editData
      this.pram.id=id;
      this.pram.name=name;
      this.pram.icon=icon;
      this.pram.address=address;
      this.pram.keywords=keywords;
      this.pram.longitude=longitude;
      this.pram.mobile=mobile;
      this.pram.latitude=latitude;
      this.pram.type=type;
      this.pram.status=status;
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.loading=true;
        save(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        }).finally(()=>{
          this.loading=false;
        })
      })
    }),
  }
}
</script>
<style>
.box::-webkit-scrollbar{
  width: 0;
}
</style>
